<template lang="pug">
.cp-plan-view
  el-dialog(:title="title", :visible="visible", width="60%", @close="close")
    el-row(:gutter="20")
      el-col(:span="24")
        strong 【 采购单号 】
        span(v-text="formData.order")
    el-row(:gutter="20")
      el-col(:span="12")
        strong 【 申请人 】
        span {{ formData.applicant | compare-list(empSelect) }}
      el-col(:span="12")
        strong 【 需求部门 】
        span {{ formData.depart | compare-list(oneDeptSelect) }}
    el-row(:gutter="20")
      el-col(:span="12")
        strong 【 创建日期 】
        span {{ formData.createTime | date-locale }}
      el-col(:span="12")
        strong 【 供应商 】
        span {{ formData.supply | compare-list(supplySelect) }}
    el-row(:gutter="20")
      el-col(:span="24")
        strong 【 成本中心 】
        span {{ formData.costCenter || '暂无' }}
    el-row(:gutter="20")
      el-col(:span="24")
        strong 【 项目信息 】
        span {{ formData.projectInfo || '暂无' }}
    el-row(:gutter="20")
      el-col(:span="24")
        strong 【 项目用途 】
        span {{ formData.projectUse || '暂无' }}
    el-row(:gutter="20")
      el-col(:span="24")
        strong 【 备注 】
        span {{ formData.comment || '暂无' }}
    h3.pw-title 物料明细列表
    .pw-table
      el-table(:data="formData.materiels", highlight-current-row, size="mini")
        el-table-column(align="center", show-overflow-tooltip, type="index", label="序号", :fixed="true")
        el-table-column(align="center", show-overflow-tooltip, prop="incode", label="物料编码")
        el-table-column(align="center", show-overflow-tooltip, prop="name", label="名称")
        el-table-column(align="center", show-overflow-tooltip, prop="maker", label="制造商")
          template(slot-scope="scope")
            span {{ scope.row.maker | compare-list(skuManSelect) }}
        el-table-column(align="center", show-overflow-tooltip, prop="size", label="规格")
        el-table-column(align="center", show-overflow-tooltip, prop="bom", label="BOM版本")
        el-table-column(align="center", show-overflow-tooltip, prop="buyUnit", label="采购单位")
          template(slot-scope="scope")
            span {{ scope.row.buyUnit | compare-list(unitSelect) }}
        el-table-column(align="center", show-overflow-tooltip, prop="buyNum", label="采购数量")
        el-table-column(align="center", show-overflow-tooltip, prop="price", label="估计单价(含税)", min-width="104px")
        el-table-column(align="center", show-overflow-tooltip, prop="countAll", label="合计")
          template(slot-scope="scope")
            span {{ (+scope.row.buyNum) * (+scope.row.price) }}
        el-table-column(align="center", show-overflow-tooltip, prop="currency", label="币种")
          template(slot-scope="scope")
            span {{ scope.row.currency | compare-list(currencySelect) }}
        el-table-column(align="center", show-overflow-tooltip, prop="arrivalTime", label="到货日期", min-width="96px")
          template(slot-scope="scope")
            span {{ scope.row.arrivalTime | date-locale }}
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'planview',
  props: {
    title: {
      type: String,
      default: '查看采购申请'
    },
    visible: Boolean,
    formData: Object
  },
  data() {
    return {};
  },
  methods: {
    close () {
      this.$emit('close');
    }
  },
  computed: {
    ...mapGetters(['empSelect', 'oneDeptSelect', 'supplySelect', 'skuManSelect', 'currencySelect', 'unitSelect'])
  },
  mounted () {}
};
</script>

<style lang="sass">
.cp-plan-view
  .pw-title
    font-size: 14px
    margin-top: 16px
    span
      margin-left: 8px
      color: #409EFF
      font-size: 13px
  .pw-table
    margin-bottom: 16px
    width: 100%
    table
      width: 100%!important
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
    .el-table__empty-block
      display: none
  .el-row
    margin-bottom: 12px
    &:nth-child(odd)
      background: #f5f5f5
    &:nth-child(even)
      background: beige
  strong
    display: inline-block
    font-weight: 400
    margin-right: 8px
</style>
